<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/prewimg.css">
		<style type="text/css">
			html,
			body {
				width: 100%;
				height: 100%;		
				margin-top: 0;
			}
			.mui-content{
				background-color: #FFFFFF;
				z-index: 99;
			}
			.topimg-div {
				width: 100%;
				
			}
			
			.head-div {
				width: 100%;
				display: flex;
			}
			
			.headimg {
				width: 20%;
				height: 10%;
				margin-top: -11%;
				margin-left: 5%;
			}
			
			.name-span {
				margin-left: 3%;
				margin-top: 1%;
				font-size: 120%;
			}
			
			.topimg {
				width: 100%;
			}
			
			.content-div {
				width: 94%;
				margin-left: 3%;
				margin-top: 1%;
			}
			

			.hr-div {
				border-bottom: 1px solid #F1F1F1;
			}
			
			#gexingname {
				padding: 0;
				padding-left: 3%;
				border: 0;
				color: #767676;
			}
			
			.zhanghao-div {
                padding: 2% 0;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				border-bottom: 1px solid #F1F1F1;
				width: 100%;
				color: #B7B7B7;
			}
			
			.zhanghao-div .input {

				width: 88%;
				color: black;
				border: #2277AA;
				margin-bottom: 0;
			}
			
			.threebutton-div {
				width: 100%;
				display: flex;
				margin-top: 5%;
			}
			
			.button-div {
				width: 33.3333%;
				display: flex;
				justify-content: center;
			}
			
			.button {
				width: 80%;
				padding: 1%;
				font-size: 100%;
				border-color: #B7B7B7;
			}
			
			#imgcontent {
				width: 97%;
				margin-left: 3.5%;
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 1.5%;
			}
			
			.mui-card {
				background-color: #FFFFFF;
				width: 100%;
				margin-left: 0;
				height: auto;
			}
			
			.write-div {
				width: 91%;
				padding-top: 3%;
				font-size: 110%;
				z-index: 99;
				margin-left: 5%;
				padding-bottom: 1%;
			}
			
			.mui-card-footer {
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				font-size: 120%;
				padding: 0;
				margin: 0;
				color: #C6C6C6;
			}
			
			#aaaa {
				width: 33.3333%;
			}
			
			.cardtop {
				margin-top: 6.5%
			}
			
			.imgarea{
				width: 47.8%;
				margin: 
				0.5%;
				height: 23%;
				overflow: hidden;
				list-style: none;
				padding-bottom: 0;
			}
			.mui-card-footer-bar{
				display: flex;justify-content: center;align-items: center;
			}
			.footer-num{
				font-size: 70%;
			}
			.mui-content #contimg ul li{
				list-style: none
				
			}
		</style>
	</head>

	<body onresize="windowSizeChange();">
		<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">

		<div class="topimg-div">
			<img src="../images/timg9.jpg" class="topimg" id="topimg"/>
		</div>

		<div class="head-div">
			<img src="../images/timg10.jpg" class="headimg" id="headimg" />
			<span class="name-span">将就看</span>
		</div>
		<div class="hr-div"><input type="text" id="gexingname" placeholder="个性签名.." /></div>

		<div id="" class="content-div">
			<div class="zhanghao-div"><span>账号</span><input class="input" type="text" id="zhanghao" placeholder="回显内容" /></div>
			<div class="zhanghao-div">院系<input class="input" type="text" id="yuanxi" placeholder="回显内容" /></div>
			<div class="zhanghao-div">专业<input class="input" type="text" id="zhuanye" placeholder="回显内容" /></div>
			<div class="threebutton-div">
				<a class="button-div" id="wdtai"><button class="button" type="button">写动态</button></a>
				<a class="button-div button-div1"><button class="button" type="button">我的关注</button></a>
				<a class="button-div"><button class="button" type="button" id="install">设置</button></a>
			</div>
		</div>

   
		<div id="contimg" style="width: 100%;">
               <ul class="mui-table-view mui-table-view-chevron">
      
    		   </ul>
		</div>
  </div>
</div>

		<script src="../js/mui.min.js"></script>
		<script src="../js/mui.zoom.js"></script>
		<script src="../js/mui.previewimage.js"></script>
		<script src="../js/arttmpl.js"></script>
		<script src="../js/app.min.js"></script>
		<script src="../js/mui.pullToRefresh.js"></script>
	    <script src="../js/mui.pullToRefresh.material.js"></script>
		<script type="text/javascript">
			mui.previewImage(function(img){
				plus.webview.currentWebview().setStyle({
					top: '25px',
					bottom: '0px'
				})
			},function(img){
				plus.webview.currentWebview().setStyle({
					top: '0px',
					bottom: '51px'
				})
			});
			mui.init({
			  pullRefresh: {
			    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
			    down : {
			      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
			      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
			     // height: 50,//可选,默认50px.下拉刷新控件的高度,
			      auto: true,//可选,默认false.首次加载自动下拉刷新一次
//			      contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
//			      contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
//			      contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容
			      callback : showa//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
			    }
			  }
			});
			
			function showa(){
				setTimeout(function(){
					mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
				},2000)
			}
			var oglHeight = document.querySelector("body").offsetHeight;
			var windowSizeChange = function () {
			var tempHeight = document.querySelector("body").offsetHeight;
			var tabbarshow  = document.getElementById("login-bottom-text")
		    if(tempHeight == oglHeight) {

		      }else{

		      }
		    }
        
				//定义参数类型 
				var record = [{
						'headimg': "../images/1.jpg",
						"name": "叫爷",
						"time": "发表于 2056-06-80 25:30",
						"shuoshuo": "我对你好，是想让你以同样的态度对待我，而不是让你觉得自己很牛逼，草泥玛",
						"imgs": [{
							"img": '../images/11.jpg'
						}]
					},
					{
						'headimg': "../images/1.jpg",
						"name": "叫爷",
						"time": "发表于 2056-06-80 25:30",
						"shuoshuo": "我对你好，是想让你以同样的态度对待我，而不是让你觉得自己很牛逼，草泥玛",
						"imgs": [{
							"img": "../images/f6ed8c129f510ca67558f4e9e96bed16962e74dfce4eb-zoVoNJ_fw658.jpg"
						}]
					},
					{
						'headimg': "../images/2.jpg",
						"name": "囧",
						"time": "发表于 2116-13-34 15:30",
						"shuoshuo": "佛曰：喝最烈的酒，吃最野的狗！",
						"imgs": [{
								"img": "../images/22.jpg"
							},
							{
								"img": "../images/222.jpg"
							}
						]
					},
					{
						'headimg': "../images/11298122748b742d0co.jpg",
						"name": "小尧",
						"time": "发表于 2026-061-30 15:30",
						"shuoshuo": "故意古黄金股有一天你菜市场超市菜市场水水水水水水水水嘻嘻嘻嘻嘻嘻嘻水水水水水水水水水水水水水水水水水水水抚养费",
						"imgs": [{
								"img": "../images/11.jpg"
							},
							{
								"img": "../images/laoshu.jpg"
							},
							{
								"img": "../images/222.jpg"
							}
						]
					},
					{
						'headimg': "../images/11298122748b742d0co.jpg",
						"name": "小尧",
						"time": "发表于 2026-061-30 15:30",
						"shuoshuo": "故意古黄金股有一天你菜市场超市菜市场水水水水水水水水嘻嘻嘻嘻嘻嘻嘻水水水水水水水水水水水水水水水水水水水抚养费",
						"imgs": [{
								"img": "../images/11.jpg"
							},
							{
								"img": "../images/laoshu.jpg"
							},
							{
								"img": "../images/222.jpg"
							},
							{
								"img": "../images/222.jpg"
							}
						]
					}
				];
			mui.ready(function(){
				
				//利用图灵接口演示聊天布局 
				template.config('escape', false);
				//追加模板消息 
				var str = template('card-img-tigan', {
					"record": record
				});
				document.getElementById('contimg').innerHTML = str;
			});
			
			window.onload = function() {
				var viewwidth = document.body.clientWidth;
				var imgas = document.getElementsByClassName("imgcontent");
				var topimg = document.getElementById('topimg');
				var headimg = document.getElementById('headimg');
				topimg.style.height = "-webkit-calc(" + viewwidth * 0.65 + "px)";
				headimg.style.height = "-webkit-calc(" + viewwidth * 0.2 + "px)";
				for(var i = 0; i < record.length; i++) {
					if(record[i].imgs.length >= 3) {
						for(var j = 0; j < record[i].imgs.length; j++) {
							var divimg = imgas[i].getElementsByTagName("div")[j];
							var imgarray = imgas[i].getElementsByTagName("img")[j];
							var realWidth = imgarray.naturalWidth;
				 			var realHeight = imgarray.naturalHeight;
				 			realbi = realWidth/realHeight;
						    divimg.style.cssText = "width: 31%;height: -webkit-calc(" + viewwidth * 0.28 + "px)";
							if(realWidth >= realHeight){
								//alert(getNaturalWidth(imgarray));
							    var num = (viewwidth * 0.31-viewwidth*0.31*realbi)/2;
								imgarray.style.cssText = "width: -webkit-calc(" + viewwidth * 0.31*realbi + "px);height: -webkit-calc(" + viewwidth * 0.28 + "px);margin-left: -webkit-calc(" + num + "px);";
							}else{
							    var num = (viewwidth *0.31 /realbi - viewwidth * 0.28) /2;
								imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth *0.31 /realbi + "px);margin-top: -webkit-calc(" + (-num) + "px);"
							}
						}   
					}
					else if(record[i].imgs.length == 1) {
						    var divimg = imgas[i].getElementsByTagName("div")[0];
							var imgarray = imgas[i].getElementsByTagName("img")[0];
							var realWidth = imgarray.naturalWidth;
				 			var realHeight = imgarray.naturalHeight;
				 			realbi = realWidth/realHeight;					    
							if(realWidth >= realHeight){
								divimg.style.cssText = "width: 95%;max-height: -webkit-calc(" + viewwidth * 0.9 + "px);height: -webkit-calc(" + viewwidth * 0.95/realbi+ "px);";
								imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth * 0.95/realbi+ "px);";
							}else{
								divimg.style.cssText = "width: 66%;max-height: -webkit-calc(" + viewwidth + "px);height: -webkit-calc(" + viewwidth *0.66 /realbi + "px);";
								imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth *0.66 /realbi + "px);"
							}
						}
							
					else{
						for(var j = 0; j < record[i].imgs.length; j++) {
							var divimg = imgas[i].getElementsByTagName("div")[j];
							var imgarray = imgas[i].getElementsByTagName("img")[j];
							var realWidth = imgarray.naturalWidth;
				 			var realHeight = imgarray.naturalHeight;
				 			realbi = realWidth/realHeight;
						    divimg.style.cssText = "width: 38%;height: -webkit-calc(" + viewwidth * 0.36 + "px)";
							if(realWidth >= realHeight){
							    var num = (viewwidth * 0.36-viewwidth*0.38*realbi)/2;
								imgarray.style.cssText = "width: -webkit-calc(" + viewwidth * 0.38*realbi + "px);height: -webkit-calc(" + viewwidth * 0.36 + "px);margin-left: -webkit-calc(" + num + "px);";
							}else{
							    var num = (viewwidth *0.38 /realbi - viewwidth * 0.36) /2;
								imgarray.style.cssText = "width: 100%;height: -webkit-calc(" + viewwidth *0.38 /realbi + "px);margin-top: -webkit-calc(" + (-num) + "px);"
							}
						}
					}
				}
			}
			
			
			
			document.getElementById('wdtai').addEventListener('tap', function() {
				mui.openWindow({
					url: 'wdtai.html',
					id: 'wdtai.html',
				})
			})
			document.getElementById('install').addEventListener('tap', function() {
				mui.openWindow({
					url: 'install.html',
					id: 'install.html',
				})
			})
		</script>
        <!--修改头象、背景图像-->
        <script type="text/javascript">
            (function($) {
                $.init();
                $.plusReady(function() {
                    //初始化头像，和预览图
                 document.getElementById("topimg").addEventListener('tap',function(){
                 	gallerybgImg();
                 })

                    //弹出菜单
                mui(".head-div").on("tap", "#headimg", function(e) {
                        if(mui.os.plus) {
                            var a = [{
                                title: "拍照"
                            }, {
                                title: "从手机相册选择"
                            }];
                            plus.nativeUI.actionSheet({
                                title: "修改头像",
                                cancel: "取消",
                                buttons: a
                            }, function(b) {
                                switch(b.index) {
                                    case 0:
                                        break;
                                    case 1:
                                        getImage();
                                        break;
                                    case 2:
                                        galleryImg();
                                        break;
                                    default:
                                        break
                                }
                            })
                        }

                    });
                });

                //拍照
                function getImage() {
                    var c = plus.camera.getCamera();
                    c.captureImage(function(e) {
                        //存储到本地
                        plus.io.resolveLocalFileSystemURL(e, function(entry) {
                            cutImage(entry.toLocalURL());//裁剪图片，传入绝对地址
                        }, function(e) {
                            console.log("读取拍照文件错误：" + e.message);
                        });
                    }, function(s) {
                        console.log("error" + s);
                    }, {
                        filename: "_doc/head.jpg"
                    })
                }

                //相册
                function galleryImg() {
                    plus.gallery.pick(function(a) {
                        plus.io.resolveLocalFileSystemURL(a, function(entry) { 　　　　　　//entry为图片原目录（相册）流
                            cutImage(entry.toLocalURL());
                        }, function(e) {
                            console.log("读取图片错误：" + e.message);
                        });
                    }, function(a) {}, {
                        filter: "image"
                    })
                };

                
                 //相册
                function gallerybgImg() {
                    plus.gallery.pick(function(a) {
                        plus.io.resolveLocalFileSystemURL(a, function(entry) { 　　　　　　//entry为图片原目录（相册）流
                            cutbgImage(entry.toLocalURL());
                        }, function(e) {
                            console.log("读取图片错误：" + e.message);
                        });
                    }, function(a) {}, {
                        filter: "image"
                    })
                };
                 //裁剪背景图片
                function cutbgImage(path) {
                    $.openWindow({
                        url: 'cutbgimg.html',
                        id: 'cutimg.html',
                        extras: {
                            path: path,
                        },
                        show: {
                            aniShow: 'zoom-fade-in',
                            duration: 800
                        },
                        waiting: {
                            autoShow: true
                        }
                    });
                }
                
                
                //裁剪图片
                function cutImage(path) {
                    $.openWindow({
                        url: 'cutimg.html',
                        id: 'cutimg.html',
                        extras: {
                            path: path,
                        },
                        show: {
                            aniShow: 'zoom-fade-in',
                            duration: 800
                        },
                        waiting: {
                            autoShow: true
                        }
                    });
                }
                //更新用户头像，主要是裁剪页面裁剪完后触发的
                //添加updateHeadImg自定义事件监听
                window.addEventListener('updateHeadImg',function(event){
                  
                  //根据id向服务器请求新闻详情
                  if(event.detail.imgpath) {
                  	     //mui.alert(event.detail.imgpath);
                        document.getElementById("headimg").src = event.detail.imgpath;
                        console.log(event.detail.imgpath);
                        mui.ajax({
							url: 'http://127.0.0.1:8080/insertTel',
							data: {
								lyFacePath: event.detail.imgpath
							},
							async: true, //将false改为true
							crossDomain: true, //强制使用5+跨域
							dataType: 'json', //服务器返回json格式数据
							type: 'get', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							//processData: false,
							headers: {'Content-Type': 'application/x-www-form-urlencoded'},
							success: function() {
		                        mui.toast('成功上传！');
							},
							error: function(xhr, type, errorThrown) {
								mui.toast("上传失败！");
							}
						});
                    }else{
                    	//mui.alert(event.detail.img_path);
                    	document.getElementById("topimg").src = event.detail.img_path;
                    	console.log(event.detail.img_path);
                    	mui.ajax({
							url: 'http://127.0.0.1:8080/insertTel',
							data: {
								lyBackPath: event.detail.img_path
							},
							async: true, //将false改为true
							crossDomain: true, //强制使用5+跨域
							dataType: 'json', //服务器返回json格式数据
							type: 'get', //HTTP请求类型
							timeout: 10000, //超时时间设置为10秒；
							//processData: false,
							headers: {'Content-Type': 'application/x-www-form-urlencoded'},
							success: function() {
		                        mui.toast('成功上传！');
							},
							error: function(xhr, type, errorThrown) {
								mui.toast("上传失败！");
							}
						});
                    }
                });
                                
            })(mui);
        </script>

		<!--渲染模板-->
		<script type="text/template" id="card-img-tigan">
			<% for(var i in record){ var item=record[i]; %>
        <li>
			<div class="mui-card">
				<div class="mui-card-header mui-card-media cardtop">
					<img src="<%=item.headimg%>" id="tigan<%=(i+1)%>" />
					<div class="mui-media-body">
						<span id="name<%=(i+1)%>"><%=item.name%></span>
						<p id="time<%=(i+1)%>">
							<%=item.time%>
						</p>
                        <img class="xlimg" style="width: 8%;float: right;margin-top: -11%;margin-right: 5%;" src="../images/xiala.png" />
					</div>
				</div>
				<div id="write-div<%=(i+1)%>" class="write-div">
					<%=item.shuoshuo%>
				</div>
				<div class="mui-card-content" style="margin: 1% 0">
					<div id="imgcontent" class="imgcontent">
						<% for(var j in item.imgs){ var res=item.imgs[j]; %>
						<div class="imgarea" ><img src="<%=res.img%>" data-preview-src="" data-preview-group="<%=(i+1)%>"/></div>
						<% } %>
					</div>

				</div>
				<div class="mui-card-footer">
					<div id="aaaa">
						<div class="mui-card-footer-bar"><img src="../images/love.png" width="22%" />喜欢<span class="footer-num">(1.2万)</span></div>
					</div>
					<div id="aaaa">
						<div class="mui-card-footer-bar"><img src="../images/chat.png" width="15%" />评论<span class="footer-num">(345)</span></div>
					</div>
					<div id="aaaa">
						<div class="mui-card-footer-bar"><img src="../images/add.png" width="13%" />关注<span class="footer-num">(1234)</span></div>
					</div>
				</div>
			</div>
		</li>
			<% } %>
		</script>



	</body>

</html>